<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="确认"
    cancelText="取消"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="24">
<!--        <a-col :md="24" :sm="24">-->
<!--          <div style="margin: 10px">-->
<!--            <span style="color: #66c3fe">修改记录</span>-->
<!--          </div>-->
<!--        </a-col>-->
        <a-col :md="24" :sm="24">
          <a-table
            :columns="columns"
            :dataSource="changeHistoryList"
            :pagination="false"
            :loading="tableLoading"
            bordered
          >
            <template slot="applyTime" slot-scope="text, record">
              {{ record.applytime && record.applytime !== 0 ? formatTime(record.applytime) : '--' }}
            </template>
            <template slot="auditTime" slot-scope="text, record">
              {{ record.audittime && record.audittime !== 0 ? formatTime(record.audittime) : '--' }}
            </template>
            <template slot="auditStatus" slot-scope="text">
              <a-tag :color="text === '通过' ? 'green' : text === '不通过' ? 'red' : 'orange'">
                {{ text || '待审核' }}
              </a-tag>
            </template>
            <template slot="reason" slot-scope="text">
              <a-tooltip :title="text">
                <span>{{ text || '--' }}</span>
              </a-tooltip>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/common/manage'

export default {
  name: 'VeJwChengjiChangeHistoryModal',
  data() {
    return {
      title: '修改记录',
      width: 1000,
      visible: false,
      confirmLoading: false,
      tableLoading: false,
      model: {},
      changeHistoryList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => index + 1
        },
        {
          title: '申请时间',
          dataIndex: 'applytime',
          key: 'applytime',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'applyTime' }
        },
        {
          title: '申请用户',
          dataIndex: 'applyuserid',
          key: 'applyuserid',
          width: 120,
          align: 'center'
        },
        {
          title: '修改原因',
          dataIndex: 'reasontidText',
          key: 'reasontidText',
          align: 'left',
          scopedSlots: { customRender: 'reason' }
        },
        {
          title: '审核状态',
          dataIndex: 'auditstatusText',
          key: 'auditstatusText',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'auditStatus' }
        },
        {
          title: '审核时间',
          dataIndex: 'audittime',
          key: 'audittime',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'auditTime' }
        },
        {
          title: '审核人',
          dataIndex: 'audituserid',
          key: 'audituserid',
          width: 120,
          align: 'center'
        }
      ],
      url: {
        list: '/kwgl/veJwChengji/query-update-list'
      }
    }
  },
  methods: {
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.loadChangeHistory()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    },
    loadChangeHistory() {
      this.tableLoading = true
      
      httpAction(this.url.list + '?id=' + this.model.id, {}, 'get')
        .then((res) => {
          if (res.success) {
            const statusMap = { 0: '待审核', 1: '通过', 2: '不通过' }
            this.changeHistoryList = (res.result || []).map(item => {
              // 兼容多种字段名
              const status = item.auditStatus ?? item.auditstatus ?? item.audit_status
              const statusNum = Number(status)
              return {
                ...item,
                auditstatusText: statusNum in statusMap ? statusMap[statusNum] : '待审核'
              }
            })
          } else {
            this.$message.warning(res.message || '获取修改记录失败')
          }
        })
        .catch((err) => {
          console.error('获取修改记录失败:', err)
          this.$message.error('获取修改记录失败')
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    formatTime(timestamp) {
      if (!timestamp) return '--'
      const date = new Date(timestamp * 1000)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    getStatusColor(status) {
      switch (status) {
        case 0:
          return 'orange'
        case 1:
          return 'green'
        case 2:
          return 'red'
        default:
          return 'default'
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return '待审核'
        case 1:
          return '通过'
        case 2:
          return '不通过'
        default:
          return '未知'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 12px;
}
</style> 